<template>
    <div>
    	<head-top signin-up='msite'>
    		<router-link :to="'/search/geohash'" class="link_search" slot="search">
	    		<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
	    			<circle cx="8" cy="8" r="7" stroke="rgb(255,255,255)" stroke-width="1" fill="none"/>
	    			<line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>
	    		</svg>
    		</router-link>
        <router-link to="/msite" slot="msite-title" class="msite_title">
          <span class="title_text ellipsis">{{msiteTitle}}</span>
        </router-link>
    	</head-top>
      <div class="msite_banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img :src="imgBaseUrl + '/api/public/img/banner/ban1.jpg'" alt="">
                </div>
                <div class="swiper-slide">
                  <img :src="imgBaseUrl + '/api/public/img/banner/ban1.jpg'" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
      </div>
    	<nav class="msite_nav">
    		<div class="swiper-container" v-if="foodTypes.length">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide food_types_container">
	            		<router-link :to="{path: '/food', query: {geohash, title: foodItem.title, restaurant_category_id:0}}" v-for="foodItem in foodTypes" :key="foodItem.id" class="link_to_food">
	            			<figure>
	            				<img :src="imgBaseUrl + foodItem.icon">
	            				<figcaption>{{foodItem.catname}}</figcaption>
	            			</figure>
	            		</router-link>
		            </div>
		        </div>
		        <div class="swiper-pagination"></div>
		    </div>
		    <img src="../../images/fl.svg" class="fl_back animation_opactiy" v-else>
    	</nav>
    	<div class="shop_list_container">
	    	<header class="shop_header">
	    		<svg class="shop_icon">
	    			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
	    		</svg>
	    		<span class="shop_header_title">附近商家</span>
	    	</header>
	    	<shop-list v-if="hasGetData" :geohash="geohash"></shop-list>
    	</div>
    	<foot-guide></foot-guide>
    </div>    
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { imgBaseUrl } from "src/config/env";
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import shopList from "src/components/common/shoplist";
import {
  msiteAddress,
  msiteFoodTypes,
  cityGuess,
  getAddr,
  getLocation
} from "src/service/getData";
import "src/plugins/swiper.min.js";
import "src/style/swiper.min.css";

export default {
  data() {
    return {
      geohash: "", // city页面传递过来的地址geohash
      msiteTitle: "请选择地址...", // msite页面头部标题
      foodTypes: [], // 食品分类列表
      hasGetData: false, //是否已经获取地理位置数据，成功之后再获取商铺列表信息
      imgBaseUrl: imgBaseUrl //图片域名地址
    };
  },
  async beforeMount() {
    // if (!this.$route.query.geohash) {
    // 	const address = await cityGuess();
    // 	this.geohash = address.latitude + ',' + address.longitude;
    // }else{
    // 	this.geohash = this.$route.query.geohash
    // }
    //保存geohash 到vuex
    //this.SAVE_GEOHASH(this.geohash);
    //获取位置信息
    //let res = await msiteAddress(this.geohash);
    //this.msiteTitle = res.name;
    // 记录当前经度纬度
    //

    getLocation(r => {
      this.RECORD_ADDRESS({
        latitude: r.point.lat,
        longitude: r.point.lng
      });
      getAddr(r.point.lng, r.point.lat, rs => {
        this.msiteTitle = rs.address;
        this.SAVE_GEOHASH(rs.address);
      });
    });
    this.hasGetData = true;
  },
  mounted() {
    //获取导航食品类型列表
    msiteFoodTypes(this.geohash).then(res => {
      this.foodTypes = res;
    });
    //初始化swiper
    new Swiper(".msite_banner .swiper-container", {
      pagination: ".swiper-pagination",
      loop: true
    });
  },
  updated() {},
  components: {
    headTop,
    shopList,
    footGuide
  },
  computed: { ...mapState(["latitude", "longitude"]) },
  methods: {
    ...mapMutations(["RECORD_ADDRESS", "SAVE_GEOHASH"]),
    // 解码url地址，求去restaurant_category_id值
    getCategoryId(url) {
      let urlData = decodeURIComponent(
        url.split("=")[1].replace("&target_name", "")
      );
      if (/restaurant_category_id/gi.test(urlData)) {
        return JSON.parse(urlData).restaurant_category_id.id;
      } else {
        return "";
      }
    }
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
#head_top {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#0af),
    to(#0085ff)
  );
  background-image: -webkit-linear-gradient(left, #0af, #0085ff);
  background-image: linear-gradient(90deg, #0af, #0085ff);
  color: #fff;
}
.link_search {
  left: 0.8rem;
  @include wh(0.9rem, 0.9rem);
  @include ct;
  line-height: 1;
}
.msite_title {
  @include center;
  width: 50%;
  color: #fff;
  text-align: center;
  margin-left: -0.5rem;
  .title_text {
    @include sc(0.8rem, #fff);
    text-align: center;
    display: block;
  }
}
.msite_banner {
  padding-top: 1.9rem;
  .swiper-pagination {
    bottom: 0;
  }
  .swiper-slide {
    img {
      width: 100%;
      max-width: 100%;
      vertical-align: middle;
    }
  }
}
.msite_nav {
  background-color: #fff;
  border-bottom: 0.025rem solid $bc;
  .swiper-container {
    @include wh(100%, auto);
    padding-bottom: 0.6rem;
    .swiper-pagination {
      bottom: 0.2rem;
    }
  }
  .fl_back {
    @include wh(100%, 100%);
  }
}
.food_types_container {
  display: flex;
  flex-wrap: wrap;
  .link_to_food {
    width: 25%;
    padding: 0.3rem 0rem;
    text-align: center;
    @include fj(center);
    figure {
      img {
        margin-bottom: 0.3rem;
        @include wh(1.8rem, 1.8rem);
      }
      figcaption {
        text-align: center;
        @include sc(0.55rem, #666);
      }
    }
  }
}
.shop_list_container {
  margin-top: 0.4rem;
  border-top: 0.025rem solid $bc;
  background-color: #fff;
  .shop_header {
    .shop_icon {
      fill: #999;
      margin-left: 0.6rem;
      vertical-align: middle;
      @include wh(0.6rem, 0.6rem);
    }
    .shop_header_title {
      color: #999;
      @include font(0.55rem, 1.6rem);
    }
  }
}
</style>
